import React, { useEffect, RefObject, useState } from "react";
import styles from "./index.module.scss";
import {
  Form,
  Input,
  Button,
  Dialog,
  DatePicker,
  Toast,
  Skeleton,
  List,
} from "antd-mobile";
import dayjs from "dayjs";
import type { DatePickerRef } from "antd-mobile/es/components/date-picker";
// radio
import { Radio } from "antd-mobile";

// 路由
import { useNavigate } from "react-router-dom";

// 导入仓库
import {
  myUserToken,
  storeUser,
  changeIsLogin,
  changeUser,
} from "@/store/userSlice";

// 导入带有类型的属性，方法 1.
import { useAppDispatch, useAppSelector } from "../../hooks";

// 请求
import { ApiCheckLogin, ApiMemberCarList, ApiMemberInfo, ApiMemberUpdate } from "@/utils/api";

// 验证码
// import { ApiSendCaptcha,ApiRegister } from "@/utils/api";
// import wxfetch from "@/utils/wxfetch";

// 加密解密
import crypt from "@/utils/crypto";


// 定义item接口
interface RootObject {
  name: string;
  sex: number;
  birthday: any;
  captcha: number | string;
  mobile: string | number;
  plate_number: string;
  member: Array<string>;
}

// 车牌号
interface Datum {
  id?: number;
  member_id?: number;
  status?: number;
  code?: string;
  plate_number?: string;
  sort?: number;
  created_at?: string;
  updated_at?: string;
}



export default () => {
  // 表单更新
  // const [form] = Form.useForm();

  // 导入仓库 2.使用属性
  const userToken = useAppSelector(myUserToken);
  // const user = useAppSelector(storeUser);

  // 导入仓库 2.使用方法
  const dispatch = useAppDispatch();

  // 路由跳转
  const navigate = useNavigate();
  // 初始化检验是否注册
  const getAccessToken = async () => {
    // 是否已注册
    // const isRegister = checkRegister();
    // 是否有accessToken
    const encryptedUserToken = checkUserToken();
    if (encryptedUserToken) {
      // 有
      // 判断是否过期
      console.log("已注册过");
    } else {
      console.log("未注册过");
      pushRegister();
    }
  };
  // 去到注册页;
  const pushRegister = () => {
    // window.location.href = "http://127.0.0.1:8080";
    navigate("/register");
  };

  // 解密accessToken 检测是否有token,并检查过期
  const checkUserToken = () => {
    // 检查是否存在已加密的用户令牌信息在 localStorage 中
    const encryptedUserToken = localStorage.getItem("encryptedUserToken");

    if (encryptedUserToken) {
      // 用户已登录，解密用户令牌并执行相应逻辑
      const decryptedUserToken = crypt.decrypt(encryptedUserToken);
      // console.log("解密的 user_token:", decryptedUserToken);
      // 执行其他逻辑，如设置用户状态、重定向等
      // 是否过期，过期重新请求，否则跳转
      // window.location.href = 'http://mfmaef89.beesnat.com/index';
      return decryptedUserToken;
    }
    return false;
  };

  // 检查并登录的member_id
  const [member_id, setMember_id] = useState(-1);

  // 车牌号
  const [showKeyboard, setShowKeyboard] = useState(false);
  const [value, setValue] = useState("");
  // 会员车辆
  const [member, setMember] = useState<Datum["plate_number"][]>([]);

  // 骨架屏
  const [loading, setLoading] = useState(true);
  // 用户填写信息
  const [formData, setFormData] = useState({
    name: "",
    sex: 0,
    birthday: null,
    mobile: "",
    captcha: "",
    plate_number: "",
    member: member,
  });

  // 弹窗
  const [visibleCloseRight, setVisibleCloseRight] = useState(false);

  // 请求登录状态
  const checkLogin = async () => {
    console.log(userToken.openid, "openid");
    const res = await ApiCheckLogin(userToken.openid);
    if (res.code == 0) {
      //  存到仓库？
      console.log(res.data.member_id, "member_id");
      // 当前页面使用
      setMember_id(res.data.member_id);
      // getMemberInfo(res.data.member_id);
      return res.data.member_id;
    } else {
      console.log("未登录");
      return;
    }
  };

  // 修改user对象属性值
  const handleFieldChange = <K extends keyof RootObject>(
    fieldName: K,
    value: RootObject[K]
  ) => {
    // console.log(fieldName, value);
    setFormData((prevData) => ({
      ...prevData,
      [fieldName]: value,
    }));
  };

  //  user对象里的属性名 属性值
  const handleNameInputChange = (
    type: keyof RootObject,
    value: RootObject[keyof RootObject]
  ) => {
    // console.log("type", type);
    handleFieldChange(type, value);
    // form.setFieldsValue(formData);
    // console.log("formData", formData);
  };

  // 获取会员详情信息
  const getMemberInfo = async (member_id2?: number) => {
    let my_member_id = member_id2 ? member_id2 : member_id;
    if (!userToken.openid) {
      console.log("需重新进入");
      return;
    }
    // console.log(my_member_id, "my_member_id");
    // 请求用户信息
    const resInfo = await ApiMemberInfo(my_member_id);
    // console.log(resInfo, "resInfo");
    if (resInfo.code != 0) {
      console.log("请求用户信息失败");
      return;
    }
    // 成功
    // 更新用户对象
    const { name, mobile, sex, birthday } = resInfo.data;
    // 更新
    handleNameInputChange("name", name);
    handleNameInputChange("mobile", mobile);
    handleNameInputChange("sex", sex);
    handleNameInputChange("birthday", new Date(birthday));
    // form.setFieldsValue(formData);
    return resInfo;
  };

  // 获取验证码
  const handleSendCodeClick = async () => {
    // 在这里处理发送验证码的逻辑
    // 获取手机号的值
    // const res = await ApiSendCaptcha(formData.mobile);
    // 后续布置阿里云
    // if(res.code==0){
    //   handleNameInputChange("captcha", res.data.code);
    // }
    console.log("mobile:", formData.mobile);
  };
  // // 修改手机号
  // const changePhone = async () => {
  //   // 校验
  //   const params = { ...formData, openid: userToken.openid };
  //   console.log(params, "params");
  //   // 请求后端注册
  //   const res = await ApiRegister(params);
  //   if (res.code == 0) {
  //     //  存到仓库
  //     dispatch(changeUser(formData));
  //     // 修改登录状态
  //     // dispatch(changeIsLogin());
  //   }
  //   //  存到仓库
  //   dispatch(changeUser(formData));
  //   // 修改登录状态
  //   dispatch(changeIsLogin());
  //   console.log(res.data, "修改成功");
  // };

  // 修改信息
  const determine = async () => {
    // 校验是否有openid和session_member_id
    if (!userToken.openid || !member_id) {
      console.log("没有获取openid或没有校验登录");
      return;
    }
    // 格式化日期
    let myFormData = formData;
    if (formData.birthday) {
      myFormData = {
        ...formData,
        birthday: dayjs(formData.birthday).format("YYYY-MM-DD") as any,
      };
      console.log(myFormData, "myFormData");
    }
    // 请求参数
    const params = {
      ...myFormData,
      openid: userToken.openid,
      session_member_id: member_id,
    };
    console.log(params, "params");
    // 请求修改信息
    const res = await ApiMemberUpdate(params);
    // 请求成功
    if (res.code == 0) {
      //  存到仓库
      dispatch(changeUser(myFormData));
      Toast.show({ content: "保存成功", icon: "success" });
      // 修改登录状态
      // dispatch(changeIsLogin());
      console.log(res.data, "修改成功");
      navigate("/memberCar");
    } else [Toast.show({ content: "保存失败", icon: "fail" })];
  };
  // 表达提交事件
  const onFinish = (values: any) => {
    console.log("values", values);
    Dialog.alert({
      content: <pre>{JSON.stringify(values, null, 2)}</pre>,
    });
  };
  // 请求车牌号
  // 车辆详情 二次处理数据
  const getMemberCarList = async () => {
     try {
       // 二次处理
        const res = await ApiMemberCarList();
        const data = res.data.map((item) => {
          return item.plate_number;
        });
        setMember(data);
     } finally {
       // 无论请求成功或失败，都设置 loading 为 false
       // 使用骨架屏
       setLoading(false);
     }
   
    // setFormData({
    //   ...formData,
    //   member: data
    // });
    // 显示第一项 更新表单
  };
  // 检查登录 获取member_id
  const initData = async () => {
    const member_id = await checkLogin();
    if (!member_id) return;
    // 用于后续 获取会员详情信息
    try {
      await getMemberInfo(member_id);
    } finally {
      // 无论请求成功或失败，都设置 loading 为 false
      // 使用骨架屏
      setLoading(false);
    }
    // 请求车牌号
    // getMemberCarList();
    // 获取仓库的openid
    // ApiCheckLogin(userToken.openid);
    // 获取仓库的手机号，初始化
    // await getUser();
    // 根据openid获取用户信息
    // await getUserInfo(userToken.access_token, userToken.openid);
  };
  // 修改其他
  const changeInfo = ()=>{
    navigate("/infochange");
  }
  // 修改手机号
  const changePhone = () =>{
    navigate("/phone");
  }
  // 挂载页面
  useEffect(() => {
    getAccessToken();
    // 检查登录 获取member_id
    initData();
  }, []);
  // 挂载页面
  // useEffect(() => {
  //   // console.log(formData, "formData");
  //   form.setFieldsValue(formData);
  // }, [formData, form]);

  return (
    <div className={styles.form}>
      <Skeleton.Paragraph
        animated
        lineCount={8}
        style={{ display: loading ? "block" : "none" }}
      />
      {/* <div className="bg">
        <img src="../../assets/img/bg.png" alt="" />
        <div className="home_title">个人中心</div>
      </div> */}
      <List
        mode="card"
        header="会员信息"
        style={{ display: !loading ? "block" : "none" }}
      >
        <List.Item extra={formData.name} onClick={changeInfo}>
          姓名
        </List.Item>
        <List.Item
          extra={formData.sex == 1 ? "男" : formData.sex == 2 ? "女" : "未知"}
          onClick={changeInfo}
        >
          性别
        </List.Item>
        <List.Item extra={formData.mobile} onClick={changePhone}>
          手机号
        </List.Item>
        <List.Item
          extra={
            formData.birthday
              ? dayjs(formData.birthday).format("YYYY-MM-DD")
              : "请选择日期"
          }
          onClick={changeInfo}
        >
          出生日期
        </List.Item>
      </List>
    </div>
  );
};
